<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 
	模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
	对于任何复杂逻辑，你都应当使用计算属性
	如果你不希望有缓存，可以方法来替代
-->
		<div id="app">
			<h3>收货人: {{uname}}</h3>
			<h3>收货地址: {{address}}</h3>
			<h3>当地空气PM25值:{{pm25}}</h3>
			<img :src="pm25img">
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						uname: "dingding",
						province: "浙江", //省份
						city: "宁波", //城市          
						county: "江北区", //区县
						addressDetail: "风华路495号", //	详细地址  
						pm25: 201,
					}
				},

				//定义方法
				methods: {
					//方法，所以用法同方法的用法——必须加()
				},

				//定义计算属性
				computed: {
					//属性，所以用法同属性的用法——一定不要不加()
					address() {
						return this.province + this.city + this.county + this.addressDetail;
					},

					pm25img() {
						let index = 0;
						if (this.pm25 < 100) index = 1;
						else if (this.pm25 < 200) index = 2;
						else if (this.pm25 < 300) index = 3;
						else index = 4;
						return `../img/${index}.png`;
					},
				},
			}).mount("#app");
			//测试: 在F12->console->vm.pm25 = 330
		</script>
	</body>

</html>